<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>

document.getElementById('switchButton').addEventListener('click', function() {
  const pages = document.querySelectorAll('.page');
  const activePage = document.querySelector('.page.active');

  if (activePage.classList.contains('page1')) {
    activePage.classList.remove('active');
    pages[1].classList.add('active');
  } else {
    activePage.classList.remove('active');
    pages[0].classList.add('active');
  }
});
</script>

<body>
    <div class="viewport">
        <div class="page page1 active">这是第一页内容</div>
        <div class="page page2">这是第二页内容</div>
    </div>

    <button id="switchButton">切换页面</button>
</body>
<style>
    /* 隐藏滚动条 */
    body {
        overflow: hidden;
    }

    .viewport {
        position: relative;
        perspective: 1000px;
        /* 添加透视效果 */
    }

    .page {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        backface-visibility: hidden;
        /* 防止背面内容可见 */
        transition: transform 0.8s ease-in-out;
        /* 动画过渡 */
    }

    .page1 {
        background-color: #f0f0f0;
        z-index: 2;
    }

    .page2 {
        background-color: #e0e0e0;
        transform: rotateY(180deg);
        /* 初始状态时翻转至背面 */
        z-index: 1;
    }

    .active {
        /* 翻转到正面的状态 */
        transform: rotateY(0);
    }

    /* JS控制切换时添加/移除 .active 类 */
</style>

</html>